<template>
  <div class="container">
    <van-nav-bar title="车辆信息" left-arrow @click-left="$router.back()" />
    <div>
      <div>
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="(item, index) in xinxi.picture" :key="index">
            <img :src="item" alt="">
          </van-swipe-item>

        </van-swipe>
        <!-- <img :src="xinxi.picture[0]" alt=""> -->
      </div>
      <div style="margin-top: 20px;">
        <van-cell-group inset>
          <van-cell  >
            <template #title>车辆信息</template>
            <template #default>{{ xinxi.id }}</template>
          </van-cell>
          <van-cell  >
            <template #title>车牌号码</template>
            <template #default>{{ xinxi.licensePlate }}</template>
          </van-cell> <van-cell  >
            <template #title>车型</template>
            <template #default>{{ xinxi.truckType }}</template>
          </van-cell> <van-cell  >
            <template #title>载重</template>
            <template #default>{{ xinxi.allowableLoad }}吨</template>
          </van-cell>
        </van-cell-group>
      </div>
    </div>
  </div>
</template>

<script>
import { car } from '@/api/user'
export default {
  name: 'CarIndex',
  data () {
    return {
      xinxi: {}
    }
  },
  created () {
    this.carList()
  },
  methods: {
    async carList () {
      const res = await car()
      console.log(res)
      this.xinxi = res.data.data
      this.xinxi.picture = this.xinxi.picture.split(',')
      // console.log(this.xinxi)
    }
  }
}
</script>

<style scoped lang="less">
::v-deep .van-icon-arrow-left:before {
  color: black;
}

.my-swipe .van-swipe-item {
  margin-top: 10px;
  color: #fff;
  font-size: 20px;
  text-align: center;

  img {
    width: 345px;
    height: 240px;
  }
}
.van-cell__title{
  color: #818181;
}
.van-cell__value{
  color: #2a2929;
}
</style>
